<template>
	<view class="container">
		<view class="container-header">
			<view>正在读</view>
			<navigator url="/pages/index/more/more">更多 ></navigator>
		</view>
		<scroll-view scroll-x class="container-main">
			<view v-for="book in bookList" :key="book.id" class="item" hover-class="book-hover" :hover-start-time="0">
				<image :src="book.imgSrc" class="item-img" @touchend="onTouchEnd"></image>
				<text class="item-process">{{book.process}}%</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'

	const bookList = ref(Array(8).fill(0).map((_, index) => {
		return {
			id: index,
			imgSrc: '../../../static/image/page.png',
			process: index * 10
		}
	}))

	function onTouchEnd() {
		uni.navigateTo({
			url: "/pages/index/bookCatalog/bookCatalog",
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		&-header {
			display: flex;
			justify-content: space-between;
			padding: 16rpx 40rpx;
			color: $uni-text-color-grey;
			font-size: 36rpx;
		}

		&-main {
			white-space: nowrap;

			.book-hover {
				background-color: #c0c6bb;
			}

			.item {
				display: inline-block;
				width: 165rpx;
				margin-left: 20rpx;

				&-img {
					width: 150rpx;
					height: 190rpx;
					margin-bottom: 10rpx;
					display: block;
					color: $uni-text-color;
				}

				&-process {
					width: 140rpx;
					display: block;
					text-align: center;
				}

			}
		}
	}
</style>